<template>
  <div class="headerBox">
    <div class="title">交易漏斗模型</div>
    <div
      class="flexstart"
      style="position: relative; width: 600px; height: 400px"
    >
      <div
        ref="myechart"
        style="position: relative; width: 600px; height: 400px; z-index: 2"
      ></div>
      <div class="conversionBoxAsk flexstart coversionBox">
        <div class="lineBox">
          <i style="color: #c0c0c0" class="el-icon-arrow-left icons"></i>
          <div class="lines"></div>
          <div class="line"></div>
        </div>
        <div>
          <div class="titles">访问加购转化率</div>
          <div class="nums">53.13%</div>
        </div>
      </div>
      <div class="conversionBoxAdd flexstart coversionBox">
        <div class="lineBox">
          <i style="color: #c0c0c0" class="el-icon-arrow-left icons"></i>
          <div class="lines"></div>
          <div class="line"></div>
        </div>
        <div>
          <div class="titles">访问加购转化率</div>
          <div class="nums">53.13%</div>
        </div>
      </div>
      <!-- <div class="conversionBoxBuy flexstart coversionBox">
        <div class="lineBox">
          <i style="color: #c0c0c0" class="el-icon-arrow-left icons"></i>
          <div class="lines"></div>
          <div class="line"></div>
        </div>
        <div>
          <div class="titles">访问加购转化率</div>
          <div class="nums">53.13%</div>
        </div>
      </div> -->
      <!-- <div class="conversionBoxOut flexstart coversionBox">
        <div class="lineBox">
          <i style="color: #c0c0c0" class="el-icon-arrow-left icons"></i>
          <div class="lines"></div>
          <div class="line"></div>
        </div>
        <div>
          <div class="titles">访问加购转化率</div>
          <div class="nums">53.13%</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      let that = this;
      var myChart = that.$echarts.init(that.$refs.myechart);
      var option = {
        tooltip: {
          trigger: "item",
          formatter(e) {
            return `${e.name} : ${e.data.values}`;
          },
        },
        color: [
          new that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#64F0FF",
            },
            {
              offset: 1,
              color: "#3785FF",
            },
          ]),
          new that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#74C8FF",
            },
            {
              offset: 1,
              color: "#338BFE",
            },
          ]),
          new that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#09E3E1",
            },
            {
              offset: 1,
              color: "#06B6B5",
            },
          ]),
          // new that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
          //   {
          //     offset: 0,
          //     color: "#61E38E",
          //   },
          //   {
          //     offset: 1,
          //     color: "#33C550",
          //   },
          // ]),
        ],
        series: [
          {
            name: "Funnel",
            type: "funnel",
            left: "10%",
            top: 60,
            bottom: 60,
            width: "41%",
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "0%",
            sort: "descending",
            gap: 10,
            label: {
              show: true,
              position: "left",
              fontSize: 14,
            },
            labelLine: {
              length: 120,
              lineStyle: {
                width: 1,
                type: "dashed",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 24,
              },
            },
            data: [
              // {
              //   value: 80,
              //   name: "访客数",
              //   values: 100,
              // },
              {
                value: 60,
                name: "加购人数",
                values: 80,
              },
              {
                value: 40,
                name: "下单人数",
                values: 60,
              },
              {
                value: 20,
                name: "支付人数",
                values: 80000000,
              },
            ],
          },
          {
            name: "Funnel",
            type: "funnel",
            left: "10%",
            top: 60,
            bottom: 60,
            width: "41%",
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 10,
            label: {
              show: false,
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 24,
              },
            },
            data: [
              // {
              //   value: 80,
              //   name: "访客数",
              //   values: 100,
              // },
              {
                value: 60,
                name: "加购人数",
                values: 80,
              },
              {
                value: 40,
                name: "下单人数",
                values: 60,
              },
              {
                value: 20,
                name: "支付人数",
                values: 40,
              },
            ],
          },
          {
            name: "Funnel",
            type: "funnel",
            left: "10%",
            top: 60,
            bottom: 60,
            width: "41%",
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 10,
            label: {
              show: true,
              position: "inside",
              formatter(e) {
                return `${e.data.values}`;
              },
              color: "#fff",
              size: 22,
              textBorderColor: "#fff",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 24,
                color: "#000",
              },
            },
            data: [
              // {
              //   value: 80,
              //   name: "访客数",
              //   values: 100,
              // },
              {
                value: 60,
                name: "加购人数",
                values: 80,
              },
              {
                value: 40,
                name: "下单人数",
                values: 60,
              },
              {
                value: 20,
                name: "支付人数",
                values: 80000000,
              },
            ],
            z: 100,
          },
        ],
      };
      myChart.setOption(option);
      this.series = option.series[0];
    },
  },
};
</script>

<style lang="scss"scoped>
.flexstart {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.headerBox {
  min-width: 600px;
  padding: 20px 24px;
  margin-bottom: 16px;
  background: #fff;

  .title {
    color: #2e3458;
    font-size: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
  }

  .fgLine {
    width: 1px;
    height: 42px;
    background: #d8d8d8;
    margin-right: 50px;
  }

  .dataBox {
    min-width: 180px;
    margin-right: 40px;
    .titlt {
      color: #a7a7a7;
      font-size: 14px;
    }
    .line {
      width: 1px;
      height: 24px;
      border-left: 2px solid #1064ff;
      margin-right: 5px;
    }
    .newBox {
      color: #333333;
      font-size: 26px;
      font-weight: bold;
    }
    .remark {
      color: #7d7d7d;
      font-size: 14px;
    }
    .rateBox {
      padding: 5px;
      margin-left: 7px;
      background: #f7f8fa;
      img {
        width: 8px;
        height: 14px;
        margin-left: 5px;
      }
    }
  }

  .conversionBoxAsk {
    position: absolute;
    left: 42%;
    top: 25%;
    .lineBox {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      margin-right: 20px;

      .lines {
        width: 15px;
        height: 2px;
        border-bottom: 1px dashed #c0c0c0;
        margin-left: 5px;
      }

      .line {
        width: 30px;
        height: 60px;
        border: 1px dashed #c0c0c0;
        transform: skew(-20deg);
        border-left: 0;
      }

      .icons {
        position: absolute;
        bottom: -7px;
        left: -10px;
      }
    }
  }

  .conversionBoxAdd {
    position: absolute;
    left: 38%;
    top: 45%;
    .lineBox {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      margin-right: 20px;

      .lines {
        width: 20px;
        height: 2px;
        border-bottom: 1px dashed #c0c0c0;
      }

      .line {
        width: 50px;
        height: 50px;
        border: 1px dashed #c0c0c0;
        transform: skew(-20deg);
        border-left: 0;
      }

      .icons {
        position: absolute;
        bottom: -7px;
        left: -10px;
      }
    }
  }

  .conversionBoxBuy {
    position: absolute;
    left: 35%;
    top: 64%;
    .lineBox {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      margin-right: 20px;

      .lines {
        width: 10px;
        height: 2px;
        border-bottom: 1px dashed #c0c0c0;
      }

      .line {
        width: 70px;
        height: 40px;
        border: 1px dashed #c0c0c0;
        transform: skew(-20deg);
        border-left: 0;
      }

      .icons {
        position: absolute;
        bottom: -7px;
        left: -10px;
      }
    }
  }

  .conversionBoxOut {
    position: absolute;
    left: 33%;
    top: 20%;
    .lineBox {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      margin-right: 20px;

      .line {
        width: 200px;
        height: 240px;
        border: 1px dashed #c0c0c0;
        border-left: 0;
        transform: skew(-20deg);
      }

      .lines {
        width: 120px;
        height: 2px;
        border-bottom: 1px dashed #c0c0c0;
      }

      .icons {
        position: absolute;
        bottom: -7px;
        left: -10px;
      }
    }
  }

  .coversionBox {
    .titles,
    .nums {
      color: #333333;
      font-size: 14px;
    }
  }
}
</style>
